/**
 * Created by zzy on 2017/9/12.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    Dimensions,
    DeviceEventEmitter
} from 'react-native';
import {observer} from 'mobx-react/native'
import {observable, action, computed, observe} from 'mobx'
import LoadingView from '../component/LoadingView'
import Constant from '../Contant'
import PayUtil from '../util/PayUtil'
import OrderStore from "../order/OrderListStore";
import {ResetRouter} from "../../js/router/RouterUtil";

@observer
export default class PayResult extends Component {
    @observable trade_no = '' ;
    @observable totalFee = '' ;
    @observable tradeTime = '' ;
    @observable paySucceed = '' ;
    @observable channel = '' ;
    @observable loading = true ;


    static navigationOptions = {
        title: '支付结果'
    };

    async componentDidMount(){
        let {payInfo} = this.props.navigation.state.params ;
        //支付结果查询
        let result = await PayUtil.queryPay(payInfo) ;
        LOG('支付结果-------'+JSON.stringify(result));
        let {orderNo,totalFee,tradeTime,channel,payResult} = result ;
        // 交易单号 交易金额 支付方式 交易时间
        this.trade_no = orderNo ;
        this.tradeTime = tradeTime ;
        this.totalFee = totalFee ;
        this.paySucceed = payResult ;
        this.channel = channel ;
    }

    componentWillUnmount(){
        ResetRouter(this.props.navigation);
        //DeviceEventEmitter.emit('payComplete');//通知确认订单页返回
        OrderStore.refreshList(0,0,'全部');
    }
    render() {
        //编辑按钮
        const rightButton = <TouchableOpacity
            onPress={() => {
            }}
            style={{alignItems: 'center',
                justifyContent: 'center',padding: 20}}>
            <Text>完成</Text>
        </TouchableOpacity>

        return <View style={{flex: 1, backgroundColor: Constant.GRAYBGCOLOR}}>
            <View style={{paddingVertical: 20, alignItems: 'center'}}>
                <PayResultLabel success={this.paySucceed}/>
            </View>
            <View style={{
                borderBottomWidth: 1,
                borderBottomColor: Constant.SEPLINECOLOR,
                borderTopColor: Constant.SEPLINECOLOR,
                borderTopWidth: 1,
                paddingBottom: 15,
                backgroundColor: 'white',
            }}>
                <Label title="交易单号" text={this.trade_no}/>
                <Label title="支付金额" text={payFee(this.totalFee)}/>
                <Label title="支付方式" text={this.channel}/>
                <Label title="交易时间" text={this.tradeTime}/>
            </View>

        </View>
    }

}

const payFee = (fee)=>{
    return fee/100.0 + '元'  ;
}
const PayResultLabel = ({success}) => {
    let text =  '';
    let textColor='white';
    if(success=='success'){
        text='成功';
        textColor=Constant.BLUECOLOR
    }else if(success=='fail'){
        text='失败';
        textColor=Constant.REDCOLOR
    }
    return (<Text style={{color: textColor}}>支付{text}</Text>)
}
const Label = ({title, text}) => {
    return (<View style={{
        flexDirection: 'row',
        paddingTop: 15,
        paddingHorizontal: 20,
        backgroundColor: 'white',
    }}>
        <Text>{title}:</Text>
        <View style={{marginLeft: 5}}>
            <Text>{text}</Text>
        </View>
    </View>)
}
